<!-- 径向进度条组件模板 -->
<template>
  <!-- SVG容器，尺寸由组件属性控制 -->
  <svg :width="size" :height="size" viewBox="0 0 36 36" class="radial">
    <!-- 背景圆环路径 -->
    <path class="bg" d="M18 2 a 16 16 0 0 1 0 32 a 16 16 0 0 1 0 -32" />
    <!-- 进度条圆环路径，stroke-dasharray控制显示比例，colorClass控制颜色 -->
    <path class="bar" :stroke-dasharray="`${clamped} , 100`" d="M18 2 a 16 16 0 0 1 0 32 a 16 16 0 0 1 0 -32" :class="colorClass" />
    <!-- 显示百分比文本 -->
    <text x="18" y="20.5" class="label">{{ clamped }}%</text>
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 组件属性定义，默认size为120px
const props = withDefaults(defineProps<{ 
  value: number; // 进度值（0-100）
  size?: number; // 组件尺寸（可选）
}>(), { size: 120 })

// 计算属性：确保值在0-100范围内并四舍五入
const clamped = computed(() => Math.max(0, Math.min(100, Math.round(props.value))))

// 计算属性：根据进度值确定颜色类
// 85%及以上为good（绿色），60-84%为pass（蓝色），60%以下为fail（红色）
const colorClass = computed(() => clamped.value >= 85 ? 'good' : clamped.value >= 60 ? 'pass' : 'fail')
</script>

<style scoped>
/* 旋转SVG容器使进度条从顶部开始 */
.radial { transform: rotate(-90deg); }

/* 背景圆环样式：空心、浅灰蓝色、4px宽度 */
.bg { fill: none; stroke: #eef2ff; stroke-width: 4; }

/* 进度条圆环基础样式：空心、4px宽度、圆角、过渡动画 */
.bar { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke .3s ease; }

/* 进度条颜色类 */
.bar.good { stroke: #1ea97c; } /* 绿色 - 良好（85%及以上） */
.bar.pass { stroke: #1865f2; } /* 蓝色 - 通过（60-84%） */
.bar.fail { stroke: #e34d59; } /* 红色 - 未通过（60%以下） */

/* 百分比文本样式：旋转回正确方向、居中显示、粗体 */
text { transform: rotate(90deg); transform-origin: 18px 18px; font-size: 8px; text-anchor: middle; dominant-baseline: middle; fill: #0f172a; font-weight: 700; }
</style>


